<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
  >
    <el-form-item label="用例名称" prop="case_name">
      <el-input v-model="form.case_name" placeholder="请输入用例名称" />
    </el-form-item>
    <el-form-item label="接口URL" prop="api_url">
      <el-input v-model="form.api_url" placeholder="请输入完整接口URL" />
    </el-form-item>
    <el-form-item label="请求方式" prop="method">
      <el-select v-model="form.method" placeholder="请选择请求方式">
        <el-option label="GET" value="GET" />
        <el-option label="POST" value="POST" />
        <el-option label="PUT" value="PUT" />
        <el-option label="DELETE" value="DELETE" />
      </el-select>
    </el-form-item>
    <el-form-item label="请求参数" prop="params">
      <el-input
        v-model="form.params"
        type="textarea"
        rows="4"
        placeholder="JSON格式，如 {&quot;username&quot;: &quot;admin&quot;}"
      />
      <div class="param-tip">
        <span class="text-gray-500 text-sm">
          说明：1. GET请求填查询参数，POST请求填Body参数；2. 键值对需用双引号包裹；3. 数组格式如 {&quot;ids&quot;: [1,2,3]}
        </span>
      </div>
    </el-form-item>
    <el-form-item label="预期结果" prop="expected_result">
      <el-input
        v-model="form.expected_result"
        type="textarea"
        rows="3"
        placeholder="请输入预期结果（如 状态码200、包含字段 token）"
      />
    </el-form-item>
    <el-form-item label="所属项目" prop="project_id" v-if="showProject">
      <el-select v-model="form.project_id" placeholder="请选择所属项目">
        <el-option
          v-for="project in projectList"
          :key="project.id"
          :label="project.name"
          :value="project.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getProjectList } from '@/api/project'

const formRef = ref(null)
const props = defineProps({
  initialForm: {
    type: Object,
    default: () => ({})
  },
  showProject: {
    type: Boolean,
    default: false
  }
})

const form = reactive({
  id: '',
  case_name: '',
  api_url: '',
  method: 'GET',
  params: '',
  expected_result: '',
  project_id: ''
})

const rules = reactive({
  case_name: [{ required: true, message: '请输入用例名称', trigger: 'blur' }],
  api_url: [{ required: true, message: '请输入接口URL', trigger: 'blur' }],
  method: [{ required: true, message: '请选择请求方式', trigger: 'change' }],
  expected_result: [{ required: true, message: '请输入预期结果', trigger: 'blur' }],
  project_id: [{ required: true, message: '请选择所属项目', trigger: 'change' }]
})

const projectList = ref([])

// 初始化表单
onMounted(() => {
  if (props.initialForm.id) {
    Object.assign(form, props.initialForm)
  }
  if (props.showProject) {
    fetchProjects()
  }
})

// 获取项目列表（用于选择所属项目）
const fetchProjects = async () => {
  try {
    const res = await getProjectList()
    projectList.value = res.data || []
  } catch (error) {
    console.error('获取项目列表失败', error)
  }
}

// 暴露表单验证方法
defineExpose({
  validate: async () => {
    return await formRef.value.validate()
  },
  getFormData: () => ({ ...form })
})
</script>

<style scoped lang="scss">
.param-tip {
  margin-top: 8px;
  .text-gray-500 {
    color: #909399;
    font-size: 12px;
  }
}
</style>